#{extends 'main.html' /}

<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/commodity.scss'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/commodity-list.scss'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/navigationbar.scss'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/pagingbar.scss'}">


<div class="commodity-category">
	<div class="class">
		<p>季节用品</p>
		<ul>
			<li>冬季保暖</li>
			<li>降温用品</li>
			<li>除蚊用品</li>
			<li>秋冬季韩</li>
		</ul>		
	</div>
	<div class="class">
		<p>家居生活</p>
		<ul>
			<li>快乐厨房</li>
			<li>收纳有方</li>
			<li>时尚卫浴</li>
			<li>温馨家居</li>
		</ul>
	</div>
</div>

<div class="commodity-detail">
	#{doLayout /}
</div>

<style>
	.commodity-category{
		width: 200px; min-height: 300px;
		float: left;
	}
	/*商品资料*/
	.commodity-detail{
		width: 780px; min-height: 300px;
		float: right;
	}
	/*商品属性*/
	.commodity-detail .property{
		width: 300px;
		float: right;
		font-size: 1.2em;
	}
	.commodity-detail .property label{
		color: orange;
		font-size: 1.2em;
		font-weight:bold;
		line-height: 30px;
	}
	table.product-input {
		margin:0 5px;
		input.text_1{
			width : 50px;
			border:1px solid #AAAAAA;
			height:18px;
			display : inline-block;
		}
		input.button_1 {
			height : 21px;
			width : 34px;
			display : table-cell;
			text-align : center;
			vertical-align : middle;
			border : 0 none;
			color : #2953A6;
		}
	}
	
	.introduction label{
		font-size: 1.6em;
		font-weight:bold;
		line-height: 30px;
	}
	
	/*分类*/
	.class{
		clear: both;
		border: #f0f0f0 1px solid;
		margin-bottom: 10px;
	}
	.class p{
		text-align: center; font-size: 1.3em; font-weight: bold;
		color: #065fb9; background-color: #f5f5f5;
		padding: 5px 0;
	}
	.class li{
		padding-left: 1em;
		font-size: 1.2em;
	}
</style>